.bigscreen {
  .panel {
    background-repeat: no-repeat;
    background-size: 100% 100%;

    &.info {
      header {
        height: 54px;
        background-size: 100% auto;
        background-repeat: no-repeat;

        &.service {
          background-image: url(@/assets/screendeck/service-title.png);
        }

        &.event {
          background-image: url(@/assets/screendeck/event-title.png);
        }
      }

      .flow {
        height: calc(100% - 54px);
        display: flex;
        color: #fff;
        flex-wrap: wrap;
        align-content: space-around;

        dl {
          width: 50%;
          display: flex;

          &:nth-child(1) {
            dt {
              background-image: url(@/assets/screendeck/statistics/online.png);
            }
          }

          &:nth-child(2) {
            dt {
              background-image: url(@/assets/screendeck/statistics/new.png);
            }
          }

          &:nth-child(3) {
            dt {
              background-image: url(@/assets/screendeck/statistics/count.png);
            }
          }

          &:nth-child(4) {
            dt {
              background-image: url(@/assets/screendeck/statistics/average.png);
            }
          }

          &:nth-child(5) {
            dt {
              background-image: url(@/assets/screendeck/statistics/success.png);
            }
          }

          &:nth-child(6) {
            dt {
              background-image: url(@/assets/screendeck/statistics/error.png);
            }
          }

          dt {
            width: 44px;
            height: 50px;
            background-size: 100% auto;
            background-repeat: no-repeat;
            margin-right: 12px;
          }

          dd {
            width: calc(100% - 56px);

            div {
              height: 17px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #EDFAFF;
              line-height: 17px;
            }

            h4 {
              margin-top: 5px;
              height: 30px;
              font-size: 22px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #EDFAFF;
              line-height: 30px;
              letter-spacing: 1px;
            }
          }
        }
      }
    }
  }


  .today-invoke {
    background-image: url(@/assets/screendeck/background/service-rank.png);
  }

  .today-invoke {
    display: flex;
    flex-direction: column;

    &>header {
      height: 45px;
    }

    &>main {
      flex: 1;
      padding: 0 26px;
      margin: 10px 0;
      overflow: auto;
    }

    .line {
      display: grid;
      height: 54px;
      grid-template-columns: 19px 8fr 1fr;
      grid-template-rows: 23px 31px;
      grid-template-areas: 'num name value'
        'bar bar bar';
      width: 100%;

      .num {
        grid-area: num;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        background-image: url(../../../assets/bigscreen/ranking.png);
        background-size: contain;
        background-repeat: no-repeat;
      }

      .name {
        grid-area: name;
        margin-left: 18px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
      }

      .value {
        grid-area: value;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
      }

      .bar {
        grid-area: bar;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100%;

        .bar-el {
          position: relative;
          height: 4px;
          background: linear-gradient(270deg, #92E9FF 0%, #00A6FF 59%, rgba(0, 166, 255, 0.2) 100%);
          border-radius: 3px;

          &::before {
            content: ' ';
            position: absolute;
            margin: auto;
            right: -15.5px;
            top: 0;
            bottom: 0;
            display: inline-block;
            width: 30px;
            height: 31px;
            background-image: url(../../../assets/bigscreen/ranking-icon.png);
            background-size: contain;
            background-repeat: no-repeat;
          }
        }
      }

      &:nth-child(1) {
        .num {
          color: rgba($color: #000000, $alpha: 0.0);
          background-image: url(../../../assets/bigscreen/ranking_1.png);
        }

        .bar-el {
          background: linear-gradient(270deg, #FFD692 0%, #FFA400 59%, rgba(255, 217, 0, 0.2) 100%);
          width: 85%;

          &::before {
            background-image: url(../../../assets/bigscreen/ranking-icon-x.png);
          }
        }
      }

      &:nth-child(2) {
        .num {
          color: rgba($color: #000000, $alpha: 0.0);
          background-image: url(../../../assets/bigscreen/ranking_2.png);
        }

        .bar-el {
          background: linear-gradient(270deg, #FFD692 0%, #FFA400 59%, rgba(255, 217, 0, 0.2) 100%);

          &::before {
            background-image: url(../../../assets/bigscreen/ranking-icon-x.png);
          }
        }
      }

      &:nth-child(3) {
        .num {
          color: rgba($color: #000000, $alpha: 0.0);
          background-image: url(../../../assets/bigscreen/ranking_3.png);
        }

        .bar-el {
          background: linear-gradient(270deg, #FFD692 0%, #FFA400 59%, rgba(255, 217, 0, 0.2) 100%);

          &::before {
            background-image: url(../../../assets/bigscreen/ranking-icon-x.png);
          }
        }
      }
    }
  }

  .service-invoke {
    // 服务调用排行
    background-image: url(@/assets/screendeck/background/service-rank.png);
  }

  .service-org-invoke {
    background-image: url(@/assets/screendeck/background/service-org-rank.png);
  }
  .event-org-invoke {
    background-image: url(@/assets/screendeck/background/event-org-rank.png);
  }
  .event-invoke {
    background-image: url(@/assets/screendeck/background/event-rank.png);
  }

  .event-org-invoke,
  .service-org-invoke {
    >main {
      &.no-data {
        color: rgba(255,255,255,0.5);
        display: flex;
        align-items: center;
        align-content:unset;
        justify-content: center;
        padding-bottom: 10px;
      }
      padding: 0 20px;
      padding-top: 54px;
      padding-bottom: 10px;
      color: #fff;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      align-content: space-between;
      height: 100%;

      .line {
        margin: 10px 0;
        width: 100%;

        .info {
          width: 100%;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 17px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;

          .name {
            width: 50%;

          }

          .value {
            width: 50%;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            text-align: right;
          }
        }

        .bar {
          width: 100%;
          position: relative;
          padding-right: 14px;
          height: 4px;
          &.top {
            .bar-el {
              background: linear-gradient(270deg, #2A7FFC 0%, #2AF2FC 59%, rgba(42, 242, 252, 0.2) 100%);
            }
          }

          .bar-el {
            height: 4px;
            background: linear-gradient(270deg, #92E9FF 0%, #00A6FF 59%, rgba(0, 166, 255, 0.2) 100%);
            border-radius: 3px;
            
          }

          .bar-icon {
            position: absolute;
            top: -12px;
            width: 28px;
            height: 28px;
            img {
              width: 28px;
              height: 28px;
              position:relative;
              left: -24px;
            }

          }
        }
      }
    }
  }

  .service-invoke,
  .event-invoke {
    height: 100%;

    .title {
      height: 45px;
    }

    main {
      padding: 10px 10px 0 10px;
      height: calc(100% - 45px);
      &.no-data {
        color: rgba(255,255,255,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 10px;
      }
      .list {
        list-style-type: none;
        height: 100%;
        scroll-behavior: smooth;

        .list-item {
          padding: 0 20px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          // border: 1px dashed rgba(0, 98, 226, 0.45);
          background: #02172D;

          .content {
            width: 60px;
            overflow: hidden;
            height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            text-align: right;
          }

          .date {
            width: calc(100% - 60px - 63px);
            font-weight: 400;
            font-size: 12px;
            overflow: hidden;
            height: 20px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .state {
            color: rgba(46, 105, 235, 1);
            position: relative;
            width: 63px;
            font-weight: 600;
            font-size: 12px;
            line-height: 20px;

            &::after {
              position: absolute;
              right: 3px;
              top: 4px;
              content: ' ';
              border: 6px solid transparent;
              border-left: 9px solid rgba(46, 105, 235, 1);
            }

            &.top {
              color: rgba(42, 242, 252, 1);

              &::after {
                border-left: 9px solid rgba(42, 242, 252, 1);
              }
            }
          }
        }
      }
    }
  }

  .event-org-rank {
    background-image: url(@/assets/screendeck/background/event-org-rank.png);

    &>header {
      margin: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 45px;

      h3 {
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 28px;
        text-shadow: 1px 1px 5px #0068FF;
        -webkit-text-stroke: 1px #0062E2;
        text-stroke: 1px #0062E2;
      }


      .btn-group {
        display: flex;
        align-items: center;
        justify-content: end;

        &>div {
          margin-left: 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          width: 40px;
          height: 26px;
          background-image: url(../../../assets/bigscreen/api-up-btn_base.png);
          background-repeat: no-repeat;
          background-size: contain;
          cursor: pointer;

          &.active {
            background-image: url(../../../assets/bigscreen/api-up-btn_active.png);
          }
        }
      }
    }

    &>main {
      flex: 1;
      width: 100%;
      height: calc(100% - 45px);
    }
  }
}